<template>
    <!-- 标签栏 -->
    <van-tabs 
        v-model:active="StatusActive" 
        sticky @click-tab="TabChange"  
        color="#fba12f" 
        title-active-color="#fba12f" 
        background="#f7f7f7"
    >
        <van-tab 
            v-for="(item, key) in StatusList" 
            :title="item.title" 
            :name="item.value" 
            :key="key"
        >
        </van-tab>
    </van-tabs>

    <!-- 下拉刷新 -->
    <van-pull-refresh 
        v-model="refreshing" 
        @refresh="OnRefresh"
    >
        <!-- 加载列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            finished-text="没有更多了"
            @load="OnLoad"
        >
            <div class="list">
                <!-- 商品卡片 -->
                <div class="item" 
                    v-for="item in list" 
                    :key="item.id"
                >

                    <div class="header">
                        <div class="code">订单号：{{ item.code }}</div>
                        <div class="status">{{ item.status_text }}</div>
                    </div>

                    <van-card
                        :thumb="item.product.products.thumb_text"
                        @click="OnOpenProductCard(item.order_product)"
                    >
                        <template #title>
                            <div class="title">{{ item.product.products.name }}</div>
                        </template>

                        <!-- 卡片的插槽部分 -->
                        <template #desc v-if="item.product.attrs">
                            <van-tag 
                                v-for="(attr,index) in JSON.parse(item.product.attrs)" 
                                :key="index" 
                                class="tag" 
                                type="primary"
                            >
                                {{attr.value}}
                            </van-tag>
                        </template>

                        <!-- 卡片的插槽部分 -->
                        <template #desc v-else>
                            <van-tag 
                                class="tag" 
                                type="danger"
                            >
                                无商品规格
                            </van-tag>
                        </template>

                        <template #price>
                            <div class="price-box">
                                <div class="price">商品总价：￥ {{ item.product.total }}</div>
                                <div class="num">x{{ item.product.pronum }}</div>
                            </div>
                        </template>
                    </van-card>

                    <div class="footer">

                        <div class="box">

                            <div class="time">
                                下单时间：{{ item.createtime_text }}
                            </div>

                            <div class="total">
                                <div class="coupon" v-if="item.coupon">优惠：￥ {{ item.coupon_price }}</div>
                                <div>实付款：￥ {{ item.amount }}</div>
                            </div>
                        </div>

                        <div class="btn-list">
                            <!-- status = 1 仅退款 -->
                            <van-button 
                                v-if="item.status == '1'" 
                                class="button" 
                                type="danger" 
                                size="mini" 
                                @click="OnRefund1(item.id)"
                            >
                                申请退款
                            </van-button>
                            <van-button 
                                v-if="item.status == '2'" 
                                class="button" 
                                type="danger" 
                                size="mini" 
                                @click="OnRefund2(item.id)"
                            >
                                申请退货退款
                            </van-button>

                            <!-- status = 2 -->
                            <van-button 
                                v-if="item.status == '2'" 
                                class="button" 
                                type="success" 
                                size="mini" 
                                @click="OnConfirmReceive(item.id)"
                            >
                                确认收货
                            </van-button>
                            <van-button 
                                v-if="item.status == '2'" 
                                class="button" 
                                type="warning" 
                                size="mini"
                            >
                                物流详情
                            </van-button>

                            <!-- status = 3 已收货 -->
                            <van-button 
                                v-if="item.status == '3'" 
                                class="button" 
                                type="warning" 
                                size="mini" 
                                @click="ToOrderInfo(item.id)"
                            >
                                立即评价
                            </van-button>

                            <!-- 退货退款 -->
                            <van-button 
                                v-if="item.status == '-2'" 
                                class="button" 
                                type="success" 
                                size="mini"
                            >
                                等待后台审核...
                            </van-button>
                            <van-button 
                                v-if="item.status == '-3'" 
                                class="button" 
                                type="warning" 
                                size="mini" 
                                @click="BackShow = true"
                            >
                                请填写退货信息
                            </van-button>

                            <van-button 
                                class="button"
                                type="primary"
                                size="mini"
                                @click="ToOrderInfo(item.id)"
                            >
                                订单详情
                            </van-button>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
    </van-pull-refresh>

    <!-- 仅退款弹框 -->
    <van-popup 
        v-model:show="ApplyShow1" 
        position="bottom" 
        round 
        :style="{paddingBottom: '20px'}"
    >
        <van-picker
            title="退款原因"
            :columns="RemarkList"
            @cancel="ApplyShow1 = false"
            @confirm="OnRefundApply"
        />
    </van-popup>

    <!-- 退货退款的弹框 -->
    <van-popup 
        v-model:show="ApplyShow2" 
        position="bottom" 
        round
    >
        <van-form @submit="OrderApplyConfirm">
            <van-field 
                v-model="remark" 
                name="remark" 
                rows="5" 
                autosize 
                type="textarea" 
                maxlength="120"
                placeholder="请输入申请原因" 
                show-word-limit 
                :rules="[{ required: true, message: '请填写申请原因' }]" 
            />
            <van-button 
                square 
                block 
                color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
                native-type="submit"
            >提交申请</van-button>
        </van-form>
    </van-popup>

    <!-- 商品列表弹出框 -->
    <van-popup 
        v-model:show="ProductShow" 
        position="bottom" 
        round
        style="padding: 10px 0;"
    >
        <van-card 
            v-for="item in ProductList" 
            :thumb="item.products.thumb_text" 
            :num="item.pronum"
            :key="item.id"
            @click="ToProductInfo(item.proid)"
        >
            <template #title>
                <div class="title">{{item.products.name}}</div>
            </template>
    
            <!-- 卡片的插槽部分 -->
            <template #desc v-if="item.attrs">
                <van-tag 
                    v-for="(attr,index) in JSON.parse(item.attrs)" 
                    :key="index" 
                    class="tag" 
                    type="primary"
                >
                    {{attr.value}}
                </van-tag>
            </template>

            <template #desc v-else>
                <van-tag class="tag" type="danger">无规格数据</van-tag>
            </template>
    
            <template #tags>
                <div class="price">单价：￥{{item.price}}</div>
            </template>
    
            <template #price>
                <div class="price">合计：￥{{item.total}}</div>
            </template>
        </van-card>

        <div style="width:80%;margin:1em auto 0em;">
            <van-button round block type="primary" @click="ProductShow = false">关闭</van-button>
        </div>
    </van-popup>
</template>

<script setup>
// 全局this代理
const { proxy } = getCurrentInstance();
//  用户数据
const business = proxy.$business;

// 标签栏初始化数据
const StatusActive = ref('all')
// tab标签栏数据
const StatusList = ref([
    { title: '全部', value: 'all' },
    { title: '已支付', value: '1' },
    { title: '已发货', value: '2' },
    { title: '已收货', value: '3' },
    { title: '已完成', value: '4' },
    { title: '退货退款', value: '-1' },
]);

// 下拉刷新的数据
const list = ref([]);// 数据列表
const page = ref(1);// 分页
const loading = ref(false);// 加载状态
const finished = ref(false);// 是否无更多数据
const refreshing = ref(false);// 下拉刷新

// 申请仅退款
const orderid = ref(0);
// 仅退款弹出显示与否
const ApplyShow1 = ref(false);
// 退款原因列表
const RemarkList = ref([
    {text: '拍错了', value: '拍错了'},
    {text: '地址有误', value: '地址有误'},
    {text: '不想要了', value: '不想要了'},
    {text: '参数选错了', value: '参数选错了'},
    {text: '选择其他的', value: '选择其他的'},
]);

// 退货退款 
const ApplyShow2 = ref(false);
// 备注
const remark = ref('');
// 商品列表弹出显示
const ProductShow = ref(false);
// 商品列表数据
const ProductList = ref([]);

// 标签栏切换
const TabChange = async ({ name }) =>
{
    OnRefresh();
}

// 加载前钩子
// onBeforeMount(() => OnRefresh());

// 切换Tab栏
// const TabChange = debounce(() => {
//     OnRefresh();
// }, 500);

// 下拉刷新的方法
const OnRefresh = async () =>
{
    page.value = 1;
    list.value = [];
    finished.value = false;
    loading.value = true;

    setTimeout(OnLoad,1500);
}

// 加载数据方法 查询订单数据
const OnLoad = async () =>
{
    // 如果等于true说明当前进行下拉刷新
    if(refreshing.value)
    {
        // 结束下拉刷新
        refreshing.value = false;
    }

    // 组装数据
    let params = {
        page:page.value,
        busid:business.value.id,
        status:StatusActive.value
    };

    // 发起请求
    let result = await proxy.$http.post({
        url:'/order/index',
        params,
    })

    // 请求发送完毕后，加载状态也就完毕了,懒加载
    loading.value = false;

    if(result.code === 1)
    {
        // 合并数组
        list.value = list.value.concat(result.data.list);
        let count = result.data.count;

        list.value.map(item => {

            // 从订单商品里取第一个商品渲染到列表
            item.product = item.order_product[0] ?? null;

            // 如果有使用优惠券
            if(item.coupon)
            {
                // 购买的商品总价
                let amount = 0;

                // 循环计算
                item.order_product.map(product => {
                    amount += parseFloat(product.total);
                })

                // 优惠价格 .toFixed(2) 保留两位小数
                // 这里的amount是订单的总价
                item.coupon_price = (amount - parseFloat(item.amount)).toFixed(2);
            }
        });

        // 如果没有更多数据了，就说明已经加载到底了，判断是否加载完所有数据
        if(list.value.length === count)
        {
            finished.value = true;

            return false;
        }

        page.value = page.value + 1; // page.value += 1;
    }else
    {
        finished.value = true;

        proxy.$fail(result.msg);
    }
}

// 点击card组件可以查看当前订单购买的商品
const OnOpenProductCard = (product) =>
{
    ProductList.value = product;

    ProductShow.value = true;
}

// 仅退款
const OnRefund1 = (id) =>
{
    ApplyShow1.value = true;
    orderid.value = id;
}

// 退货退款
const OnRefund2 = (id) =>
{
    ApplyShow2.value = true;
    orderid.value = id;
}

// 申请仅退款
const OnRefundApply = async ({selectedValues}) =>
{
    // 组装数据
    const params = {
        orderid:orderid.value,
        remark:selectedValues[0],
        busid:business.value.id
    };

    console.log(params);

    // 发起请求
    const result = await proxy.$http.post({
        url:'/order/refundOnly',
        params,
    });

    // 请求发送完毕后，加载状态也就完毕了,懒加载
    if (result.code === 1) {
        proxy.$success(result.msg);
        ApplyShow1.value = false;
        OnRefresh();
    } else {
        proxy.$fail(result.msg);
        ApplyShow1.value = false;
    }
};

// 确认申请退货退款
const OrderApplyConfirm = async () =>
{
    // 组装数据
    const params = {
        orderid:orderid.value,
        remark:remark.value,
        busid:business.value.id
    };

    // 发起请求
    const result = await proxy.$http.post({
        url:'/order/refundAll',
        params,
    });

    // 请求发送完毕后，加载状态也就完毕了,懒加载
    if (result.code === 1) {
        proxy.$success(result.msg);
        ApplyShow2.value = false;
        OnRefresh();
    } else {
        proxy.$fail(result.msg);
        ApplyShow2.value = false;
    }
}

// 确认收货
const OnConfirmReceive = (orderid) =>
{
    proxy.$confirm({
        title: '确认收货',
        message: '是否确认收货?',
    }).then(async () =>
    {
        let result = await proxy.$http.post({
            url: '/order/receive',
            params: {
                orderid,
                busid:business.value.id
            }
        })

        if(result.code === 1)
        {
            proxy.$success(result.msg);

            OnRefresh();
        }else
        {
            proxy.$fail(result.msg);
        }
    }).catch(err => {})
}

// 跳转订单详情
const ToOrderInfo = (orderid) => 
{
    proxy.$router.push({
        path:'/order/info',
        query:{orderid}
    });
};

// 跳转商品详情
const ToProductInfo = (proid) => 
{
    proxy.$router.push({
        path:'/product/info',
        query:{proid}
    });
}



</script>


<style scoped>
@import url('/assets/css/OrderIndex.css');
</style>